<template>
	<div :id="id" class="chart"></div>
</template>

<script>
export default {
	props: ['value'],
	data() {
		return {
			id: this.getID(),
			myChart: null,
		};
	},
	methods: {
		getID() {
			return 'oeeboard-chart1-' + new Date().getTime();
		},
		resize() {
			this.myChart.resize();
		},
		initChart() {
			if (!this.myChart) {
				this.myChart = echarts.init(document.getElementById(this.id));
			}
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#1890ff',
						},
					},
					valueFormatter: (value) => {
						console.log(value, 999);
						return value + '%';
					},
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: this.value.days,
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value}%',
					},
				},
				color: ['#2564ba', '#9cbf5a', '#d3931e', '#2c9fe5'],
				series: [
					{
						name: 'oee',
						type: 'line',
						// stack: 'Total',
						data: this.value.oee,
					},
					{
						name: '合格率',
						type: 'line',
						// stack: 'Total',
						data: this.value.passRate,
					},
					{
						name: '时间稼动',
						type: 'line',
						// stack: 'Total',
						data: this.value.timeCropMovement,
					},
					{
						name: '性能稼动',
						type: 'line',
						// stack: 'Total',
						data: this.value.performanceCropMovement,
					},
				],
			};
			window.removeEventListener('resize', this.resize);
			this.myChart.setOption(option);
		},
	},
	mounted() {
		window.addEventListener('resize', () => {
			setTimeout(this.resize, 100);
		});
	},
	destroyed() {
		window.removeEventListener('resize', this.resize);
	},
};
</script>

<style scoped>
.chart {
	width: 100%;
	height: 100%;
}
</style>
